<template>
  <el-card style="max-width: 1400px">
    <el-input v-model="puid" style="width: 240px" placeholder="请输入订单号" />
    <el-button type="primary" @click="handleSearch">查询</el-button>

    <el-table :data="tableData" style="width: 100%" v-loading="loading">
      <!-- 表格列 -->
      <el-table-column type="selection" width="55" />
      <el-table-column type="index" label="序号" width="120px" />
      <el-table-column prop="id" label="订单号" width="120px" />
      <el-table-column prop="shName" label="商品名称" width="120px" />
      <el-table-column prop="price" label="订单总价" width="120px" />
      <el-table-column prop="suName" label="供应商" width="120px" />
      <el-table-column prop="shNumber" label="数量" width="120px" />
      <el-table-column prop="status" label="订单状态" width="120px">
        <template #default="scope">
          <el-tag v-if="scope.row.status === 0" type="success">待审批</el-tag>
          <el-tag v-else-if="scope.row.status === 1" type="info">已审批，待处理</el-tag>
          <el-tag v-else-if="scope.row.status === 2" type="warning">采购中</el-tag>
          <el-tag v-else-if="scope.row.status === 3" type="success">已完成</el-tag>
          <el-tag v-else-if="scope.row.status === 4" type="info">已被拒</el-tag>
          <el-tag v-else type="danger">未完成</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createDate" label="创建时间" width="180px" />
      <el-table-column prop="remark" label="备注" width="120px" />
      <el-table-column fixed="right">
        <template #default="scope">
          <el-button
            type="primary"
            :disabled="scope.row.status === 0 || scope.row.status === 3 || scope.row.status === 4"
            @click="cai(scope.row.id)"
            v-if="scope.row.status !== 2"
          >
            采购
          </el-button>
          <el-button type="primary" @click="cai(scope.row.id)" v-else>完成</el-button>
          <el-button type="danger" @click="del(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 空数据提示 -->
    <el-empty v-if="tableData.length === 0" description="暂无数据" />

    <!-- 分页模块 -->
    <el-pagination
      v-model:current-page="PageNum"
      v-model:page-size="PageSize"
      :page-sizes="[8, 10, 12, 14]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </el-card>
</template>


<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { getpuorder, getpuorderbyid, updatepuorder, deletepuorder } from '@/api/puorder';

// 响应式变量
const puid = ref(''); // 订单号输入框的值
const tableData = ref([]); // 表格数据
const PageNum = ref(1); // 当前页码
const PageSize = ref(8); // 每页显示数量
const total = ref(0); // 数据总数
const loading = ref(false); // 加载状态

// 获取订单列表
const getorder = async () => {
  loading.value = true;
  const res = await getpuorder(PageNum.value,PageSize.value,);
  await getorder(PageSize,PageNum).then((res) => {
    tableData.value=res.data.data.list;
    total.value=res.data.data.data || 0;
  })
  loading.value = false;
}

// 根据订单号查询
const getorderbyid = async () => {
  if (!puid.value) {
    ElMessage.warning('请输入订单号');
    return;
  }
  loading.value = true;
  const res = await getpuorderbyid({
    id: puid.value, // 只需要传递 id
  });
  if (res.data.code === '200') {
    tableData.value = res.data.data.list || []; // 确保 tableData 是数组
    total.value = res.data.data.total || 0; // 确保 total 是数字
  }
  loading.value = false;
};

// 处理查询按钮点击事件
const handleSearch = () => {
  if (puid.value) {
    getorderbyid(); // 如果有订单号，按订单号查询
  } else {
    getorder(); // 否则获取全部订单
  }
};

// 分页大小变化
const handleSizeChange = (val) => {
  PageSize.value = val;
  getorder(); // 重新获取数据
};

// 当前页码变化
const handleCurrentChange = (val) => {
  PageNum.value = val;
  getorder(); // 重新获取数据
};

// 采购/完成操作
const cai = async (id) => {
  const res = await updatepuorder({ id });
  if (res.data.code === '200') {
    ElMessage.success('操作成功');
    getorder(); // 刷新数据
  }
};

// 删除操作
const del = async (id) => {
  const res = await deletepuorder({ id });
  if (res.data.code === '200') {
    ElMessage.success('删除成功');
    getorder(); // 刷新数据
  }
};

// 组件挂载时获取订单列表
onMounted(() => {
  getorder();
});
</script>

<style scoped>
/* 设置按钮的左外边距 */
.el-button {
  margin-left: 10px;
}
</style>